<template>
    <div class="order">
        <el-table :data="ordersData" stripe style="width: 100%">
            <el-table-column prop="oid" label="订单号" width="90" />
            <el-table-column prop="time" label="时间" width="90" />
            <el-table-column prop="cid" label="用户编号" width="90" />
            <el-table-column prop="username" label="用户名" width="90" />
            <el-table-column prop="address" label="用户地址" width="90" />
            <el-table-column prop="gid" label="商品编号" width="90" />
            <el-table-column prop="gname" label="商品名称" width="90" />
            <el-table-column prop="number" label="商品数量" width="90" />
            <el-table-column prop="total" label="商品总价/￥" />
            <el-table-column fixed="right" label="操作" width="90">
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click.prevent="bindTapSendOrder(scope.$index)"
                    >
                        发单
                    </el-button>
                    <el-dialog
                        v-model="dialogVisible"
                        title="提示"
                        width="500"
                        :before-close="handleClose"
                    >
                        <span>确认要发单吗？订单编号:{{ordersData[targetIndex].oid}}</span>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button @click="bindTapCancelDialog">取消</el-button>
                                <el-button type="primary" @click="bindTapComfirmDialog">
                                    确认
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>


<script>
export default{
    name:"order",
    mounted(){
        document.title = ('画廊商城后台'+'-'+this.$options.name);
    }
}
</script>


<script setup>
    import {requestt} from '../utils/myAxios.js';
    import useUser from '@/store/user.js';
    import {ref} from 'vue';

    //状态：用户
    const userStore = useUser();

    //订单数据加载
    const ordersData = ref([]);
    requestt({
        //网络请求商品数据
        role:"Business",
        action:"checkOrders",
        bid:userStore.info.bid
    },(res)=>{
        ordersData.value = res.data;
    });

    //订单确认
    const dialogVisible = ref(false);
    var targetIndex = undefined;
    const bindTapCancelDialog = () => {
        dialogVisible.value = false;
    }
    const bindTapComfirmDialog = () => {
        dialogVisible.value = false;
        requestt({
            //网络请求商品数据
            role:"Business",
            action:"dealOrder",
            bid:userStore.info.bid,
            oid:ordersData.value[targetIndex].oid
        },(res)=>{
            console.log(res.data);
            ordersData.value.splice(targetIndex, 1);
        });
    }
    const bindTapSendOrder = (index) => {
        dialogVisible.value = true;
        targetIndex = index;
    }

</script>


<style scoped lang="scss">

</style>